<template>
  <div class="right-menu-container">
    <div class="right-append-menu">
      <div class="ps-dialog-head">
        <span class="ps-dialog-title">图表数据</span>
        <span class="ps-dialog-close close" @click="ClosePop"></span>
      </div>
      <div class="ps-dialog-body" style="z-index: 2300">
        <div
          id="main"
          style="width: 780px; height: 360px; margin: 0 auto"
        ></div>
        <div
          id="bar"
          style="width: 780px; height: calc(100% - 360px); margin: 0 auto"
        ></div>
      </div>
      <div class="ps-dialog-foot"></div>
    </div>
  </div>
</template>

<script>
// import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      oneData: {},
      ColorMetion: [
        {
          opacity: 0.8,
          color: [
            {
              offset: 0,
              color: "rgba(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgba(1, 191, 236)",
            },
          ],
        },
        {
          opacity: 0.8,
          color: [
            {
              offset: 0,
              color: "rgba(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgba(77, 119, 255)",
            },
          ],
        },
        {
          opacity: 0.8,
          color: [
            {
              offset: 0,
              color: "rgba(55, 162, 255)",
            },
            {
              offset: 1,
              color: "rgba(116, 21, 219)",
            },
          ],
        },
        {
          opacity: 0.8,
          color: [
            {
              offset: 0,
              color: "rgba(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgba(135, 0, 157)",
            },
          ],
        },
        {
          opacity: 0.8,
          color: [
            {
              offset: 0,
              color: "rgba(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgba(224, 62, 76)",
            },
          ],
        },
      ],
    };
  },
  props: ["isResult", "currentNode"],
  watch: {
    isResult(newV, oldV) {
      console.log(newV);
      console.log(this.currentNode);
      // this.initData();
      this.initCharts();
      this.initChartsBar();
    },
  },
  mounted() {},
  methods: {
    //初始化数据
    initData() {
      $.getJSON("../../../public/jpanTroops.json").then((res) => {
        console.log(res);
        this.oneData["title"] = res.title;
        this.oneData["list"] = res.rows;
        this.oneData["date"] = res.years;
        this.oneData["series"] = [];
        this.oneData["Lengda"] = [];
        const $this = this;
        res.rows.forEach((ele, index) => {
          this.oneData["Lengda"].push(ele.name);
          $.get("../../../public/AmericanJp" + ele.id + ".json").then((aes) => {
            console.log(aes);
            let dataBase = [];
            aes.data.forEach((tes) => {
              dataBase.push(tes.money);
            });
            let obj = {
              name: ele.name,
              type: "line",
              stack: "总量",
              smooth: true,
              lineStyle: {
                width: 0,
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  $this.ColorMetion[ele.id - 1].color
                ),
              },
              emphasis: {
                focus: "series",
              },
              data: dataBase,
            };
            $this.oneData["series"].push(obj);
            console.log(index);
            console.log(res.rows.length);
            if (index == res.rows.length - 1) {
              $this.initCharts();
            }
          });
        });
      });
    },
    //初始化-1
    // initCharts() {
    //   console.log(this.oneData);
    //   // 基于准备好的dom，初始化echarts实例
    //   var chartDom = document.getElementById("main");
    //   this.myChart = echarts.init(chartDom, "dark");

    //   // 指定图表的配置项和数据
    //   var option = {
    //     color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    //     title: {
    //       text: this.oneData.title,
    //       align: "center",
    //       width: "100%",
    //       left: "30%",
    //       textStyle: {
    //         fontSize: 30,
    //       },
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //         label: {
    //           backgroundColor: "#6a7985",
    //         },
    //       },
    //     },
    //     legend: {
    //       data: this.oneData["Lengda"],
    //       align: "left",
    //       left: "60%",
    //       top: "13%",
    //       orient: "vertical",
    //     },
    //     grid: {
    //       left: "3%",
    //       right: "40%",
    //       bottom: "3%",
    //       containLabel: true,
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         boundaryGap: false,
    //         data: this.oneData.date,
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //         name: "亿美元",
    //         nameLocation: "end",
    //       },
    //     ],
    //     series: this.oneData["series"],
    //   };
    //   // 使用刚指定的配置项和数据显示图表。
    //   this.myChart.setOption(option);
    // },
    //初始化-2
    //初始化-2
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById("main");
      this.myChart = echarts.init(chartDom, "dark");

      // 指定图表的配置项和数据
      var option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "美军逐年各军种人数预测",
          align: "center",
          width: "100%",
          left: "30%",
          textStyle: {
            fontSize: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["陆军", "海军", "空军", "海军陆战队", "海岸近卫队"],
          align: "left",
          left: "70%",
          top: "13%",
          orient: "vertical",
        },
        grid: {
          left: "2%",
          right: "40%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "军种数额",
            nameLocation: "end",
            splitNumber: 10,
          },
        ],
        series: [
          {
            name: "陆军",
            type: "line",
            data: [510000, 480000, 483000, 483000, 483800, 496800, 476800],
          },
          {
            name: "海军",
            type: "line",
            data: [326000, 336000, 323000, 332000, 337800, 341000, 306510],
          },
          {
            name: "空军",
            type: "line",
            data: [326000, 302000, 333000, 335000, 338800, 354000, 326510],
          },
          {
            name: "海军陆战队",
            type: "line",
            data: [191000, 192000, 191100, 191060, 193000, 171548, 191000],
          },
          {
            name: "海岸近卫队",
            type: "line",
            data: [4200, 5300, 4300, 4350, 4300, 4300, 4360],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    //初始化-柱状图
    initChartsBar() {
      var chartDom = document.getElementById("bar");
      var myChart = echarts.init(chartDom, "dark");
      var option;

      option = {
        title: {
          text: "美国2021年国防开支预测",
          align: "center",
          width: "100%",
          left: "30%",
          textStyle: {
            fontSize: 30,
          },
        },
        xAxis: {
          type: "category",
          data: ["2016", "2017", "2018", "2019", "2020", "2021"],
        },
         yAxis: [
          {
            type: "value",
            name: "亿美元",
            nameLocation: "end",
            splitNumber: 10,
          },
        ],
        series: [
          {
            data: [5340, 5779, 6920, 7320, 7530, 11181],
            type: "bar",
          },
        ],
      };

      myChart.setOption(option);
    },
    //关闭弹框
    ClosePop() {
      this.$emit("closeEcharts", false);
    },
  },
};
</script>

<style lang="less"  scoped>
@import "./popup.less";
</style>